import React, { Component } from 'react'
import { NavBar, Icon } from "antd-mobile";
import "./profile.scss"
import personal from "../../assets/images/header_o.jpg"
export default class Profile extends Component {
  state = {
    token: {},
    isLogin: false,
    endearment: "无昵称用户",
    sex: "男",
    introduce: "介绍一下自己",
    personalInfo:{}
  }
  handleEnd=() => {
    this.props.history.push("/endemrment/")
  }
  

  componentDidMount() {
    // 获取localStorage中token
    let loginToken = JSON.parse(localStorage.getItem("loginToken"))
    this.setState({
      token: loginToken,
    })
    // 判断token值是否存在
    if (loginToken) {
      this.setState({
        isLogin: true,
      });
    }
    let personalInfo = JSON.parse(localStorage.getItem("personalInfo"))
    this.setState({
      personalInfo
    })
  }
  render() {
    return (
      <div className="profile">
        <div className="profile-information">
          {/* 导航开始 */}
          <div className="profile-nav">
            <NavBar
              className="profile-header"
              mode="light"
              icon={<Icon type="left" />}
              onLeftClick={() => window.history.go(-1)}
              rightContent={[
                <Icon key="1" type="ellipsis" />,
              ]}
            >我的资料</NavBar>
          </div>
          {/* 导航结束 */}

          {/* 信息开始 */}
          <div className="profileInfo">
            <div className="profileInfo-item">
              <div className="profileInfo-item-img">
                <div className="left">
                  <i className="iconfont icon-wode1"></i>
                  <span>头像</span>
                </div>
                <div className="right">
                  <img src={personal} alt=""></img>
                  <i className="iconfont icon-youjiantou"></i>
                </div>
              </div>

              <div className="profileInfo-item-img">
                <div className="left">
                  <i className="iconfont icon-xin"></i>
                  <span>昵称</span>
                </div>
                <div className="right" onClick={this.handleEnd}>
                  <span>{this.state.personalInfo?this.state.personalInfo.endearment:this.state.endearment}</span>
                  <i className="iconfont icon-youjiantou"></i>
                </div>
              </div>

              <div className="profileInfo-item-img">
                <div className="left">
                  <i className="iconfont icon-xingbie"></i>
                  <span>性别</span>
                </div>
                <div className="right">
                  <span>{this.state.personalInfo?this.state.personalInfo.sex:this.state.sex}</span>
                  <i className="iconfont icon-youjiantou"></i>
                </div>
              </div>

              <div className="profileInfo-item-img">
                <div className="left">
                  <i className="iconfont icon-chanpinjieshao"></i>
                  <span>个人介绍</span>
                </div>
                <div className="right">
                  <span>{this.state.personalInfo?this.state.personalInfo.introduce:this.state.introduce}</span>
                  <i className="iconfont icon-youjiantou"></i>
                </div>
              </div>
            </div>
          </div>
          {/* 信息结束 */}

        </div>











      </div>
    )
  }
}
